<template>

  <div>
    <!--搜索框部分-->
    <el-card>

      <el-form inline label-width="90px" size="mini" class="demo-form-inline">

        <el-form-item label="软件名称">
          <el-input placeholder="请输入内容" v-model.trim="searchSoftwareParam.name" clearable size="mini"></el-input>
        </el-form-item>

        <el-form-item label="运行平台">
          <el-select v-model="searchSoftwareParam.app" placeholder="请选择书籍进度" clearable>
            <el-option label="手机" value="1"></el-option>
            <el-option label="小程序" value="2"></el-option>
            <el-option label="Windows" value="3"></el-option>
            <el-option label="苹果" value="4"></el-option>
            <el-option label="Linux" value="5"></el-option>
            <el-option label="其他" value="9"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否使用">
          <el-select v-model="searchSoftwareParam.inUse" placeholder="请选择书籍进度" clearable>
            <el-option label="未使用" value="1"></el-option>
            <el-option label="使用中" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="软件类型">
          <el-select v-model="searchSoftwareParam.typeId" placeholder="请选择软件类型" clearable>
            <el-option
              v-for="item in softwareType"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="评分">
          <el-select v-model="searchSoftwareParam.grade" placeholder="请选择评价" clearable>
            <el-option label="☆ 非常差" value="1"></el-option>
            <el-option label="☆☆ 较差" value="2"></el-option>
            <el-option label="☆☆☆ 一般" value="3"></el-option>
            <el-option label="☆☆☆☆ 优秀" value="4"></el-option>
            <el-option label="☆☆☆☆☆ 经典" value="5"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" size="mini" @click="getSoftwareListPageBefore">查询</el-button>
          <el-button type="warning" size="mini" @click="resetQuerySoftware">重置</el-button>
          <el-button type="warning" size="mini" @click="openSaveSoftware">新增</el-button>
        </el-form-item>

      </el-form>

    </el-card>


    <el-card style="margin-top: 10px">

      <el-table
        :data="softwareTable.data"
        max-height="600px"
        height="600px"
        style="width: 100%">

        <el-table-column
          prop="name"
          label="软件名称"
        >
        </el-table-column>

        <el-table-column
          prop="grade"
          label="评分"
        >
          <template slot-scope="scope">
            <el-rate disabled v-model="scope.row.grade"></el-rate>
          </template>
        </el-table-column>

        <el-table-column
          prop="softwareTypeName"
          label="软件类型"
        >
        </el-table-column>

        <el-table-column
          prop="inUse"
          label="是否使用"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.inUse === 2">
              <el-tag size="small" type="success">使用中</el-tag>
            </div>
            <div v-else>
              <el-tag size="small" type="info">未使用</el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="app"
          label="运行平台"
        >
          <template slot-scope="scope">
            {{appToChinese(scope.row.app)}}
          </template>
        </el-table-column>

        <el-table-column
          prop="describe"
          :show-overflow-tooltip="true"
          label="描述"
        >
        </el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
          width="180">
          <template slot-scope="scope">
            <el-button @click="toOpenSoftwareDetailed(scope.row)" type="text" size="small"><i class="el-icon-view"></i>查看</el-button>
            <el-button @click="openUpdSoftware(scope.row)" type="text" size="small"><i class="el-icon-edit"></i>编辑</el-button>
            <el-button @click="delSoftwareByIdTips(scope.row)" type="text" size="small"><i class="el-icon-delete"></i>删除</el-button>
          </template>
        </el-table-column>

      </el-table>

      <!--分页部分-->
      <el-pagination
        style="width:33%; margin-right:10px; margin-top:10px;"
        background
        layout="total, prev, pager, next, jumper"
        @current-change="softwarePageCurrentChange"
        :page-size="softwareTable.size"
        :current-page="softwareTable.current"
        :pager-count="5"
        :total="softwareTable.total">
      </el-pagination>

    </el-card>

    <SoftwareSaveUpd ref="softwareSaveUpdRef" @getSoftwareListPage="getSoftwareListPage"></SoftwareSaveUpd>
    <SoftwareDetailed ref="softwareDetailedRef" @appToChinese="appToChinese"></SoftwareDetailed>
  </div>

</template>

<script>

  import http from '@/utils/http'
  import SoftwareSaveUpd from './SoftwareSaveUpd.vue'
  import SoftwareDetailed from './SoftwareDetailed.vue'

  export default {
    name: "SoftwareList",
    components: {
      SoftwareSaveUpd,
      SoftwareDetailed,
    },
    data(){
      return {
        // 查询参数
        searchSoftwareParam: {
          name: null,
          app: null,
          typeId: null,
          grade: null,
          inUse: null,
        },
        // 软件类型
        softwareType: [],
        // 表格
        softwareTable: {
          // 表格数据
          data: [],
          // 每页记录数-字典
          size: 30,
          // 当前页码 - 字典
          current: 1,
          // 总记录数 - 字典
          total: 0,
        },
      }
    },
    methods: {
      /**
       * 跳转打开软件详情
       * @param software 软件信息
       */
      toOpenSoftwareDetailed(software){
        this.$refs.softwareDetailedRef.openSoftwareDetailed(software)
      },
      /**
       * 运行平台转中文
       * @param item 要转换的数据
       * @return {string}
       */
      appToChinese(item){
        if (item === 1){
          return "手机"
        } else if (item === 2){
          return "小程序"
        } else if (item === 3){
          return "Windows"
        } else if (item === 4){
          return "苹果"
        } else if (item === 5){
          return "Linux"
        } else {
          return "其他"
        }
      },
      /**
       * 运行平台转图标
       * @param item
       * @return {string}
       */
      appToIco(item){
        if (item === 1){
          return "mobile.png"
        } else if (item === 2){
          return "Applet.png"
        } else if (item === 3){
          return "windows.png"
        } else if (item === 4){
          return "Apple.png"
        } else if (item === 5){
          return "linux.png"
        } else {
          return "os.png"
        }
      },
      /**
       * 根据ID删除软件 提示信息
       * @param row 当前行数据
       */
      delSoftwareByIdTips(row){
        this.$confirm('是否删除该软件, 删除后无法恢复，是否继续?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消删除',
          type: 'warning'
        }).then(() => {
          // 确定删除
          this.delSoftwareById(row)

        }).catch(() => {
          // 取消删除
        });
      },
      /**
       * 物理删除应用
       */
      delSoftwareById(row){
        http.post("/software/delSoftwareById", {
          id: row.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.getSoftwareListPage()
          this.$message.success("删除成功");

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 打开软件编辑弹出框
       * @param row 当前行数据
       */
      openUpdSoftware(row){
        this.$refs.softwareSaveUpdRef.openPageSoftware('upd', row, this.softwareType)
      },
      /**
       * 打开软件添加弹出框
       */
      openSaveSoftware(){
        this.$refs.softwareSaveUpdRef.openPageSoftware('save', null, this.softwareType)
      },
      /**
       * 字典分页被改变的时候
       * @param value 当前页
       */
      softwarePageCurrentChange(value){
        this.softwareTable.current = value
        this.getSoftwareListPage()
      },
      /**
       * 获取软件类型
       */
      getSoftwareType(){
        http.post("/software/getSoftwareType", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.softwareType = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 重置查询
       */
      resetQuerySoftware(){
        this.searchSoftwareParam = {
          name: null,
          app: null,
          typeId: null,
          grade: null,
          inUse: null,
        }
      },
      /**
       * 查询前重置分页参数
       */
      getSoftwareListPageBefore(){
        this.softwareTable.current = 1
        this.getSoftwareListPage()
      },
      /**
       * 分页查询软件信息
       */
      getSoftwareListPage(){
        this.searchSoftwareParam.current = this.softwareTable.current
        this.searchSoftwareParam.size = this.softwareTable.size

        http.post("/software/getSoftwareListPage", this.searchSoftwareParam).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          // 分页数据
          let data = res.data;
          this.softwareTable.total = data.total;
          this.softwareTable.current = data.current;
          this.softwareTable.size = data.size;
          // 处理数据
          this.softwareTable.data = data.records

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    },
    mounted(){
      this.getSoftwareListPage()
      this.getSoftwareType()
    }
  }
</script>

<style scoped>

</style>
